<template>
	<view>
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="加载中"></u-loading-page>
		<view v-if="!loadding">
			<view class="policy_box" v-if="data !== undefined && data!== null && data.length>0">
				<view class="policy_list" v-for="(item,index) in data" :key="index">
					<text @click="info(item)">{{item.title}}</text>
					<!-- <text @click="_delete(item.id)">删除</text> -->
					<u-icon name="trash" size="22" color="#fa3534" @click="_delete(item.id)"></u-icon>
				</view>
				<u-popup :show="notify_show" mode="center" :round="10" @close="notify_show = false"
					@open="notify_show = true">
					<view class="cz_box">
						<view class="btn red" @click="updates">
							修改名称
						</view>
						<view class="btn blue" @click="details">
							查看详情
						</view>
					</view>
				</u-popup>
				<u-popup :show="update_show" mode="center" :round="10" @close="update_show = false"
					@open="update_show = true">
					<view class="up_box">
						<view class="cz-input">
							<u--input placeholder="请输入名称" border="surround" v-model="policyTitle"></u--input>
						</view>
						<view class="btn blue" @click="saveData">
							确定
						</view>
					</view>
				</u-popup>
			</view>
			<u-empty class="policy_box" v-else mode="list" icon="/static/Empty/data_null.png">
			</u-empty>
			<view class="confirm" @click="new_add">
				<u--text prefixIcon="plus" iconStyle="font-size: 38rpx; color: #ffffff; margin-right: 10rpx;"
					color="#ffffff" align="center" text="新增"></u--text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadding: true,
				notify_show: false,
				update_show: false,
				id: '',
				data: [],
				product_id: null,
				policyTitle: ''
			}
		},
		onLoad(e) {
			this.product_id = e.id
		},
		onShow() {
			this._request(this.product_id)
		},
		methods: {
			//删除
			_delete(id) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否删除',
					success: function(res) {
						if (res.confirm) {
							_this.delete_qr(id)
						}
					}
				});
			},
			async delete_qr(id) {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'setting/deletePolicy',
					data: {
						id: id
					}
				});
				let _this = this
				if (res.code == 200) {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1500,
						success() {
							setTimeout(() => {
								_this.$router.go(0)
							}, 500)
						}
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 3000
					})
				}
			},
			async _request(id) {
				const {
					data: res
				} = await this.$myHttp({
					url: 'Setting/getMyAgencyPolicy',
					data: {
						product_id: id
					}
				});
				this.loadding = false
				if (res.code == 200) {
					this.data = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 3000
					})
				}
			},
			info(item) {
				this.id = item.id
				this.policyTitle = item.title
				this.notify_show = true
			},
			updates() {
				this.notify_show = false
				this.update_show = true
			},
			async saveData() {
				uni.showLoading({
					title: '加载中'
				});
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp({
					url: 'Setting/updatePolicyTitle',
					data: {
						id: this.id,
						title: this.policyTitle
					},
					header: {
						'token': userinfo.token
					},
				});
				uni.hideLoading();
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 3000
				})
				if (res.code == 1) {
					this.update_show = false
					this._request(this.product_id)
				}
			},
			details() {
				this.notify_show = false
				uni.navigateTo({
					url: '/pages/mine/policy/detail?id=' + this.id + '&type=2'
				})
			},
			// 新增按钮
			new_add() {
				uni.navigateTo({
					url: '/pages/index/SetPolicy/new_add?product_id=' + this.product_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.policy_box {
		padding: 30rpx;
		box-sizing: border-box;
		height: 80vh;
		overflow-y: auto;

		.policy_list {
			padding: 20rpx;
			border-radius: 15rpx;
			box-shadow: 0px 1px 14px -10px #999;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;

			text {
				display: flex;
				justify-content: center;
			}
		}

		.cz_box {
			padding: 30rpx;

			.btn {
				padding: 10rpx 100rpx;
				font-size: 24rpx;
				color: #fff;
				border-radius: 10rpx;
			}

			.red {
				background-color: #fa3534;
			}

			.blue {
				margin-top: 30rpx;
				background-color: #2979ff;
			}
		}
		
		.up_box {
			padding: 30rpx;
		
			.btn {
				padding: 10rpx 0rpx;
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: #fff;
				border-radius: 10rpx;
			}
		
			.blue {
				margin-top: 30rpx;
				background-color: #2979ff;
			}
		}
	}

	.confirm {
		position: fixed;
		left: 50%;
		bottom: 30rpx;
		transform: translate(-50%, -50%);
		background-color: #018afe;
		width: 95%;
		border-radius: 15rpx;
		font-size: 28rpx;
		padding: 20rpx;
		box-sizing: border-box;
		color: #fff;
		text-align: center;
		transition: all 0.5s;
	}
</style>